<template>
	<el-row >
		<!-- 项目状态 项目趋势 -->
		<el-row  v-if='isDing == "notInDingTalk"'>
			<el-col  :md='16' :lg='11' class='mr15  mt12'>
				<el-card shadow="never"  class='relative'>
			      	<div id="myChart" :style="{height: '280px'}"></div>
			      	<el-row  class='absolute  ft14 color-blue'  style='bottom:20px;'>
			      		  <span  class='cursor  color-red'>按月</span>
					      <!-- <span  class='cursor'>按季度</span>
					      <span  class='cursor'>按年</span> -->
			      	</el-row>
			    </el-card>
			</el-col>
			<el-col :xs='24' :md='16' :lg='12' class='mr15 mt12'>
				<el-card shadow="never"  class='relative' >
				    <div id="stateChart" :style="{ height: '280px'}"></div>
				    <span  class='absolute  color-grey allAmount' ><span  class='ft14'>总金额</span><br/>{{statusAmount}}</span>
			    </el-card>
			</el-col>
		</el-row>
		<!-- 待办列表 发起列表 -->
		<el-row  class='mt12'>
			<el-col :md='24' :lg='11' class='mr20  mt12' >
				<!-- 待我处理的审批 -->
				<el-card shadow="never">
					<div  class='text-left'><i class="el-icon-time"></i>  待我处理的审批 <i  class='el-icon-refresh-left  fr  cursor'  @click='myworkInit("again")'></i>
					</div>
					<el-table
						:data="tableList"  class='mt12'  :cell-class-name='hover'  @cell-click='checkUser'
						>
						<el-table-column  prop="name" label="标题"  >
							<template slot-scope="scope">
						          {{scope.row.reqName}}
						    </template>
						</el-table-column>
						<el-table-column  prop="createTime" label="发起时间"  align='center'>
							<template slot-scope="scope">
						          {{scope.row.createTime | formatDate}}
						    </template>
						</el-table-column>
						<el-table-column  prop="createUserName" label="发起人"  ></el-table-column>
					</el-table>
					<el-pagination class='mt28'  
					        background
					        @size-change="handleSizeChange_wait"
					        @current-change="handleCurrentChange_wait"
					        :current-page="1"
					        :page-size="10"
					        :pager-count="5"
					        :hide-on-single-page='true'
					        layout="total, prev, pager, next"
					        :total="Total_wait">
					</el-pagination>
			    </el-card>
			</el-col>
			<el-col :md='24' :lg='12'  class='mt12'>
				<!-- 我发起的审批 -->
				<el-card shadow="never">
					<div  class='text-left'><i class="el-icon-position"></i>  我发起的审批  <i  class='el-icon-refresh-left  fr  cursor'  @click='myLiftInit("again")'></i></div>
					<el-table
						:data="tableList2"  class='mt12' :cell-class-name='hover'  @cell-click='checkUser2' 
						>
						<el-table-column  prop="reqName" label="标题" ></el-table-column>
						<el-table-column  prop="createTime" label="发起时间"  align='center'>
							<template slot-scope="scope">
						          {{scope.row.createTime | formatDate}}
						    </template>
						</el-table-column>
						<el-table-column  prop="status" label="状态" >
							<template slot-scope="scope">
						          <span >{{scope.row.status | project_exaAll_type}}</span>
						    </template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination class='mt28'  
					        background
					        @size-change="handleSizeChange"
					        @current-change="handleCurrentChange"
					        :current-page="1"
					        
					        :page-size="10"
					        :pager-count="5"
					        :hide-on-single-page='true'
					        layout="total, prev, pager, next"
					        :total="Total2">
					</el-pagination>
			    </el-card>
			</el-col>
		</el-row>
	</el-row>
</template>

<script >
// 引入基本模板
// let echarts = require('echarts/lib/echarts')
// // 引入柱状图组件
// require('echarts/lib/chart/bar')
// require('echarts/lib/chart/line') 
// //饼状图
// require('echarts/lib/chart/pie')
// // 引入提示框和title组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
// require('echarts/lib/component/legendScroll')//显示图例  不同颜色 形状  名字

// require("echarts/lib/component/calendar");
// require("echarts/lib/chart/custom")
//这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。

import { listMyWork,getProjectStatus,getProjectTrend,listMyLift }  from '@/api/homework/index'
export default {
	name: 'homework',
	data(){
		return {
			/*当前用户允许权限*/
	        permit:{
	            check:false,//详情
	        },
	        /*待我审批搜索*/
			search_wait:{
				limit:10,
				currentPage:1
			},
			/*我发起的搜索*/
			search:{
				limit:10,
				currentPage:1
			},
			tableList:[],
			Total_wait:null,

			tableList2:[],
			Total2:null,

			statusData:[],//状态data
			statusAmount:null,//状态总金额
			statusTrend:[],//趋势data
			montharr:[],//项目月份arr

			isDing:'',
		}
	},
	created(){
		
		let dd = this.$dingding
        /*趋势图 在钉钉环境中 不显示*/
        this.isDing = dd.env.platform
        if(this.isDing == 'notInDingTalk'){
        	this.pageInit()
        }
		this.myworkInit()
		this.myLiftInit()
		this.jurisdiction()//初始化按钮权限操作
		this.getNumber(77000+625000)
	},
	mounted() {
	},
	methods: {
		/*初始化 页面  S*/
		async pageInit(){
			
			//获得项目状态 数量
			await getProjectStatus().then(res=>{
				if(res.data.flag == true){
					//项目四种状态
					this.statusData=[ res.data.data[0], res.data.data[1], res.data.data[2], res.data.data[3] ]
					//计算总金额和 各个金额
					let AllSize =0;
					this.statusData.forEach((item)=>{
						if(item.size == null){
							item.size = 0
						}
						AllSize+=item.size
						item.size = this.getNumber(item.size)
						
					})
					this.statusAmount = this.getNumber(AllSize)
				}
			})
			.catch(error=>{
				console.log(error)
			})
			//获得项目趋势 
			await getProjectTrend().then(res=>{
				if(res.data.flag == true){
					let arr2 = [ res.data.data[1], res.data.data[2], res.data.data[3], res.data.data[4] ]
					arr2.forEach((item,index)=>{
						let arr = []
						item.forEach((it)=>{
								arr.push(it.num)
								if(index == 0){//取得月份，只取一次就好，因为都一样
									this.montharr.push(it.months.slice(-2))
								}
						})
						this.statusTrend.push(arr.reverse())
					})
				}
			})
			.catch(error=>{
				console.log(error)
			})
			
		    let chart = this.drawLine();
		    let stateChart = this.drawState()
		    //解决图标自适应问题  将mychart当成对象返回，相当于传递内部变量
		    window.onresize=function(){
	   			chart.resize();
	   			stateChart.resize()
	   		}
		},
		/*待我审批列表请求*/
		async myworkInit(str){
			await listMyWork(this.search_wait).then(res=>{
				if(res.data.flag == true){
					this.tableList = res.data.dataList
					this.Total_wait = res.data.totalRs
					if(str == 'again'){
						this.$message({type:'success',message:'当前已是最新数据！'})
					}
				}
			})
			.catch(error=>{
				console.log(error)
			})
		},
		/*我发起的列表请求*/
		async myLiftInit(str){
			await listMyLift(this.search).then(res=>{
				if(res.data.flag == true){
					this.tableList2 = res.data.dataList
					this.Total2 = res.data.totalRs
					if(str == 'again'){
						this.$message({type:'success',message:'当前已是最新数据！'})
					}
				}
			})
			.catch(error=>{
				console.log(error)
			})
		},

		//初始化按钮权限操作
	    jurisdiction(){
	        this.permit.check = this.$store.state.button_limit.find(item => {
	            return item.id === 30102
	          })
	    },
	    //项目趋势echars
	    drawLine() {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'));
			// 指定图表的配置项和数据
			myChart.setOption({
			    title: {
			        text: '项目趋势'
			    },
			    color:['#01cfcc','#ff5074','#a059ec','#04a1ff'],
			    legend:{data:['立项','过会','协议用印','发行'],top:'30',right:'0'},
			    tooltip: {},
			    xAxis: {
			        data: this.montharr.reverse(),
			        axisLabel:{interval:0},
			        
			        // type: 'value',
			        name: '月份',
					      
			    },
			    yAxis: {

			    },
			    series: [
				    {
				        name: '立项',
				        type: 'line',
				        // barWidth : 30,//柱图宽度
				        data: this.statusTrend[0]
				    },
				    
				    {
				        name: '过会',
				        type: 'line',
				        data: this.statusTrend[1]
				    },
				    {
				        name: '协议用印',
				        type: 'line',
				        data: this.statusTrend[2]
				    },
				    {
				        name: '发行',
				        type: 'line',
				        data: this.statusTrend[3]
				    },
			    ]
			})
			return myChart
	    },
	    //项目状态echars
	    drawState(){
	    	let  normal_option ={
    			formatter:[
    				'{title|{b}}{abg|}',
                    '  {ProjectHead|项目数}{rateHead|占比}{valueHead|金额}',
                    '{hr|}',
                    '  {project|{@[0]}}{rate|{d}%}{value|{@[1]}}',
    			].join('\n'),
    			backgroundColor: '#eee',
                borderColor: '#777',
                borderWidth: 1,
                borderRadius: 4,
    			rich:{
    				/*title*/
    				title:{
    					color:'#eee',
    					align:'center'
    				},
    				abg: {
                        backgroundColor: '#333',
                        width: '100%',
                        align: 'right',
                        height: 15,
                        borderRadius: [4, 4, 0, 0]
                    },
                    // headtitle
                    ProjectHead: {
                        color: '#333',
                        height: 20,
                        align: 'left'
                    },
                    project: {
                        width: 20,
                        align: 'left',
                        padding: [0, 15, 0, 10],
                    },

                    valueHead: {
                        color: '#333',
                        width: 20,
                        padding: [0, 15, 0, 25],
                        align: 'center'
                    },
                    value: {
                        width: 20,
                        padding: [0, 15, 0, 15],
                        align: 'right'
                    },

                    rateHead: {
                        color: '#333',
                        width: 30,
                        align: 'center',
                        padding: [0, 10, 0, 20]
                    },
                    rate: {
                        width: 30,
                        align: 'center',
                        padding: [0, 25, 0, 15]
                    },
    			}        		
			}
	    	// 基于准备好的dom，初始化echarts实例
	        let myChart = echarts.init(document.getElementById('stateChart'));
	        // 指定图表的配置项和数据
	       	myChart.setOption({
	       		baseOption:{
				    title: {
				        text: '项目状态'
				    },
				    color:['#01cfcc','#ff5074','#a059ec','#04a1ff'],
				    
				    tooltip: {
				    	trigger : 'item',
				    	formatter : "{b} <br/>  {a}:{c} ({d}%)"
				    },
				   	
				    series: [
					    {
				            name:'项目数',
				            type:'pie',
				            selectedMode:'single',//默认选中模式
				            // label:{
				            // 	show:true,
				            // 	position:'outside'
				            // },
				            labelLine:{

				            },
				            radius: ['30%','45%'],
				            label: {
				               normal:{
				               		formatter:' {b}  ({d}%)'
				               },
				        	},
				             data:[
				                {
				                	value:[this.statusData[0].num,this.statusData[0].size], 
				                	name:'立项',
				                	label:{
				                		normal:normal_option
				                	},
				                },
				                {
				                	value:[this.statusData[1].num,this.statusData[1].size],
				                	 name:'过会',
				                	 label:{
				                		normal:normal_option
				                	}
				                },
				                {
				                	value:[this.statusData[2].num,this.statusData[2].size], 
				                	name:'协议用印',
				                	label:{
				                		normal: normal_option
				                	}
				                },
				                {
				                	value:[this.statusData[3].num,this.statusData[3].size],
				                	 name:'发行',
				                	 label:{
				                		normal: normal_option
				                	}
				                }
				            ]
				        }
				    ]
				},
				 media: [ // 这里定义了 media query 的逐条规则。
			        {
			            query: {
			            	maxWidth: 530,
			            },   // 这里写规则。
			            option: {       // 这里写此规则满足下的option。
			                // legend: {...},
			             //    legend: {                   // legend 放在底部中间。
				            //     right: 'center',
				            //     bottom: 0,
				            //     orient: 'horizontal'    // legend 横向布局。
				            // },
				            series: [                   // 饼图布局。
				                
				                {
				                    radius: ['20%', '21%'],
				                    // center: ['50%', '70%']
				                }
				            ]
			            },
			        }
		        
		    	]

	       	})
			
			myChart.dispatchAction({
			    type: 'pieSelect',
			    // 可选，系列 index，可以是一个数组指定多个系列
			    seriesIndex: 1,
			    // 可选，系列名称，可以是一个数组指定多个系列
			    seriesName: '立项',
			    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
			    // dataIndex: number,
			    // 可选，数据名称，在有 dataIndex 的时候忽略
			    name: ''
			})
	   		return myChart
	    },
	    /*初始化 页面  E*/

	    /*数字转换显示函数 S*/
	    //项目金额数字转化为中文
		getNumber(num){
			if(num == null || num == 0){
				return  0
			}
			num*=10000//单位增加为万元
			if(num <= 10000 ){
				return num/10000 + 'w'
			}
			else if(num>10000 && num<100000000){
				// console.log(Math.floor(num/10000) + 'w')
				return  Math.floor(num/10000) + 'w'
			}
			else if(num>100000000){
				let buil = num/100000000
				//保留两位小数
				// console.log(Math.floor(buil*100)/100 + '亿')
				return  Math.floor(buil*100)/100 + '亿'
			}
		},
		/*数字转换显示函数 E*/

		/*表格操作 列表样式，分页操作 S*/
		hover({row, column, rowIndex, columnIndex}){
	       //console.log(row, column, rowIndex, columnIndex)
	       //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置
	        if(columnIndex == 0){
	          return 'activeCol'
	        }
	    },
	    //点击表格第一列  查看详情  操作审批
      	checkUser(row, column, cell, event){
	        if(column.label == '标题'){
	            this.$router.push({path:'/examine/detail',query:{code:row.code,isCheck:'false',type:row.reqType}})
	        }
	    },
	    //点击表格第一列  查看详情  查看审批
	    checkUser2(row, column, cell, event){
	        if(column.label == '标题'){
	            this.$router.push({path:'/examine/detail',query:{code:row.code,isCheck:'true',type:row.reqType}})
	        }
	    },
	    //待办列表分页
	    handleSizeChange_wait(val) {
			this.search_wait.limit = val;
			this.myworkInit()
	    },
	    /*页数变化 */
	    handleCurrentChange_wait(val) {
			this.search_wait.currentPage = val
			this.myworkInit()
	    },
	    handleSizeChange(val) {
	      this.search.limit = val;
	      this.myLiftInit()
	    },
	    /*页数变化 */
	    handleCurrentChange(val) {
	      this.search.currentPage = val
	      this.myLiftInit()
	    },
	    /*表格操作 列表样式，分页操作 E*/

	},

}
</script>

<style type="text/css" scoped>
/*总金额 绝对定位*/
.allAmount{bottom:138px;left:100px;right:100px;text-align: center;}
	
</style>